<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{ stationName }}_{{$t('40-TGKt8o__zzzQuzHZu1')}}</p>
      <div class="operate-area">
        <div class="inline-item search-item">
          <Input v-model="pileCoding" @on-enter="searchTable">
            <span slot="prepend">{{$t('PO_N3YQc95VLSXNN59RnR')}}</span>
            <Button slot="append" icon="ios-search" @click="searchTable"></Button>
          </Input>
        </div>
        <div class="inline-item search-item">
          <Input v-model="pileName" @on-enter="searchTable">
            <span slot="prepend">{{$t('dUE9V6jUHBdS6m9avfiqp')}}</span>
            <Button slot="append" icon="ios-search" @click="searchTable"></Button>
          </Input>
        </div>
      </div>
      <Table
        :loading="loading"
        :columns="columns"
        :data="data"
      ></Table>
      <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </Card>
  </div>
</template>

<script>
import { getAgentPileData } from '@/api/data2'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('agent')

export default {
  name: 'pile_query',
  data () {
    return {
      loading: false,
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('PO_N3YQc95VLSXNN59RnR'),
          key: 'pileCoding'
        },
        {
          title: this.$t('dUE9V6jUHBdS6m9avfiqp'),
          key: 'name'
        },
        {
          title: this.$t('xNJjaNDTMwLjvRvzBHsfP'),
          key: 'release'
        },
        {
          title: this.$t('MVMkv_batpRoCwl-kdm4h'),
          key: 'status'
        },
        {
          title: this.$t('_U-ZtVG4JB3EY66WR98OJ'),
          key: 'type',
          filters: [
            {
              label: this.$t('1mJZgGX4yUf8keAuTCd6s'),
              value: 1
            },
            {
              label: this.$t('pUp8tS1uT4bIraonzAECH'),
              value: 2
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 1) {
              return row.type === '直流'
            } else if (value === 2) {
              return row.type === '交流'
            }
          }
        },
        {
          title: this.$t('DoDnfJWVBk9EnrmW0ttoy'),
          key: 'gunNumber'
        },
        {
          title: this.$t('fY_52QeinV75slILCCRhx'),
          key: 'power'
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          width: 200,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                  icon: 'md-settings'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.setItem(params.index)
                  }
                }
              }, this.$t('Kg36nCKTEKsaFEKqQntCt')),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                  icon: 'md-color-wand'
                },
                on: {
                  click: () => {
                    this.remoteControl(params.index)
                  }
                }
              }, this.$t('p2mtp1PTMOtn__qxtAq63'))
            ])
          }
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20],
      stationName: '',
      pileCoding: '',
      pileName: ''
    }
  },
  created () {
    this.stationName = this.selectStations.length ? this.selectStations[0].chargeStationName : ''
    this.queryTable()
  },
  computed: {
    ...mapState(['selectStations'])
  },
  watch: {
    '$route' () {
      this.stationName = this.selectStations.length ? this.selectStations[0].chargeStationName : ''
    }
  },
  methods: {
    searchTable () {
      this.queryTable()
    },
    async queryTable ({ current = this.current, pageSize = this.pageSize, pileCoding = this.pileCoding, pileName = this.pileName } = {}) {
      this.loading = true
      const res = await getAgentPileData({
        pageSize,
        current,
        pileCoding,
        pileName
      })
      this.data = res.tableData
      this.total = res.total
      this.loading = false
    },
    changePage (num) {
      this.current = num
      this.queryTable()
    },
    changePageSize (num) {
      this.pageSize = num
      this.queryTable()
    },
    remoteControl (index) {

    },
    setItem (index) {

    }
  }
}
</script>
